<script setup lang="ts" name="Profile">
import userAvatar from './userAvatar.vue';
import userInfo from './userInfo.vue';
import resetPwd from './resetPwd.vue';
import resetEmail from './resetEmail.vue';
import resetPhone from './resetPhone.vue';
import { getUserProfile } from '@/api/system/user';
// import PhoneViewer from '@/components/PhoneViewer';

const activeTab = ref('userinfo');
const state = reactive({
  user: {
    userId: 0,
    userName: '',
    nickName: '',
    dept: {
      deptName:''
    },
  },
  roleGroup: {},
  postGroup: {}
});

const getUser = () => {
  getUserProfile().then(response => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
};

onMounted(()=>{
  getUser();
})

</script>

<template>
  <div class="app-container">
    <el-space :fill="true" wrap class="user-box-card">
      <el-card class="user-box-card">
        <el-row :gutter="20">
          <el-col :span="5" :xs="24">
            <div class="text-center">
              <userAvatar :user="state.user" />
            </div>
          </el-col>
          <el-col :span="19" :xs="24">
            <h1>
              {{ state.user.userName }}
            </h1>
            <p>
              <el-tag type="primary">{{ state.roleGroup }}</el-tag>
            </p>
            <p>
              <div v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
            </p>
            <!--              <ul class="list-group list-group-striped">-->
            <!--                -->
            <!--                <li class="list-group-item">-->
            <!--                  <svg-icon icon-class="user"/>-->
            <!--                  用户名称-->
            <!--                  <div class="pull-right"></div>-->
            <!--                </li>-->
            <!--                <li class="list-group-item">-->
            <!--                  <svg-icon icon-class="phone"/>-->
            <!--                  手机号码-->
            <!--                  <div class="pull-right">-->
            <!--                    <phone-viewer :phone="state.user.phoneNumber"/>-->
            <!--                  </div>-->
            <!--                </li>-->
            <!--                <li class="list-group-item">-->
            <!--                  <svg-icon icon-class="email"/>-->
            <!--                  用户邮箱-->
            <!--                  <div class="pull-right">{{ state.user.email }}</div>-->
            <!--                </li>-->
            <!--                <li class="list-group-item">-->
            <!--                  <svg-icon icon-class="tree"/>-->
            <!--                  所属部门-->
            <!--                  <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{-->
            <!--                      state.postGroup-->
            <!--                    }}-->
            <!--                  </div>-->
            <!--                </li>-->
            <!--                <li class="list-group-item">-->
            <!--                  <svg-icon icon-class="peoples"/>-->
            <!--                  所属角色-->
            <!--                  <div class="pull-right">{{ state.roleGroup }}</div>-->
            <!--                </li>-->
            <!--                <li class="list-group-item">-->
            <!--                  <svg-icon icon-class="date"/>-->
            <!--                  创建日期-->
            <!--                  <div class="pull-right">{{ state.user.createTime }}</div>-->
            <!--                </li>-->
            <!--              </ul>-->
          </el-col>
        </el-row>
      </el-card>
      <el-card class="user-box-card">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本资料" name="userinfo">
            <userInfo :user="state.user" />
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="resetPwd">
            <resetPwd />
          </el-tab-pane>
          <el-tab-pane label="修改邮箱" name="resetEmail">
            <resetEmail />
          </el-tab-pane>
          <el-tab-pane label="修改手机号" name="resetPhone">
            <resetPhone />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-space>
  </div>
</template>

<style lang="scss" scoped>
.user-box-card {
  width: 100%;
}
</style>
